<script setup lang="ts">
// HelloWorld 组件不再需要，可以移除
// import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div id="app-container">
    <!-- 常驻的存钱罐精灵 -->
    <img src="/assets/piggy-mascot.svg" alt="存钱罐精灵" class="global-mascot" />
    <!-- 路由视图，用于显示当前路由匹配的组件 -->
    <router-view />
  </div>
</template>

<style scoped>
/* 移除原有的 logo 样式 */
/* .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
} */

/* 添加全局精灵样式 */
.global-mascot {
  position: fixed; /* 固定定位，使其不随页面滚动 */
  top: 10px;
  left: 10px;
  width: 40px; /* 调整大小 */
  height: 40px;
  z-index: 1000; /* 确保在顶层 */
  /* 可以添加一些悬停效果或动画 */
  transition: transform 0.3s ease;
}

.global-mascot:hover {
  transform: scale(1.1) rotate(-5deg);
}

/* 确保 app 容器占据基本空间 */
#app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; /* 根据需要调整 */
  color: #2c3e50;
  /* margin-top: 60px; /* 如果需要为固定元素留出空间 */
}
</style>
